<template>
  <a-layout>
    <a-layout-content class="mytest">
      <div>数字: <app-number :value="13332333" /></div>
      <div>手机: <app-mobile :value="13725588389" /></div>
      <div>ID: <app-copy :value="123456789" /></div>
      <a-divider />
      <pre>{{ sortArr }}</pre>
      <a-button @click="sortVisible = true">
        排序
      </a-button>
      <app-sort
        v-model="sortVisible"
        :data="sortArr"
        @change="(a) => (sortArr = a)"
      />
      <a-divider />
      <div style="font-size: 20px;">
        <app-icon value="#icon-phone" />
        <app-icon :value="appIconType" />
        <a-button style="margin-left: 20px;" @click="iconVisible = true">
          修改图标
        </a-button>
        <app-icon-select
          v-model="iconVisible"
          @change="(val) => (appIconType = val)"
        />
      </div>
      <a-divider />
      <div>
        <a-button @click="imageVisible = true">
          显示图片
        </a-button>
        <app-image-view v-model="imageVisible" :data="imageList" />
      </div>
      <a-divider />
      <div>
        longitude:{{ longitude }}<br />
        latitude:{{ latitude }}<br />
        <a-button @click="visibleMap = true">
          获取地图坐标
        </a-button>
        <app-map-getpoint
          v-model="visibleMap"
          :longitude="longitude"
          :latitude="latitude"
          @change="
            (lo, la) => {
              longitude = lo
              latitude = la
            }
          "
        />
      </div>
      <a-divider />
      <div>
        <a-button @click="edit.visible = true">
          显示修改
        </a-button>
        <app-edit
          v-model="edit.visible"
          :after="edit.after"
          :func="edit.func"
          :all="edit.all"
          :item="edit.item"
          :item-hide="edit.itemHide"
          :width="edit.width"
          :title="edit.title"
          :update="edit.update"
        />
      </div>
      <a-divider />
      <div>
        <a-button @click="CreateAdminShow">
          数据下拉查询
        </a-button>

        <div style="margin-top: 10px;">
          用户查询：
          <app-data-select
            v-model="dataSelectUser"
            :init="
              (arr) => {
                var returnArr = []
                for (var index in arr) {
                  returnArr.push({
                    ...arr[index],
                    label: arr[index].realname,
                    value: arr[index].id,
                  })
                }
                return returnArr
              }
            "
            radio
            url="/user"
          />
          {{ dataSelectUser }}
        </div>
        <div style="margin-top: 10px;">
          分类查询：
          <app-data-select
            v-model="dataSelectClass"
            radio
            url="/systemAreaType"
            :init="
              (arr) => {
                var returnArr = []
                for (var index in arr) {
                  returnArr.push({
                    ...arr[index],
                    label: arr[index].type_name,
                    value: arr[index].id,
                  })
                }
                return returnArr
              }
            "
          />
          {{ dataSelectClass }}
        </div>
        <div style="margin-top: 10px;">
          用户查询：
          <app-data-select
            v-model="dataSelectUserArr"
            :init="
              (arr) => {
                var returnArr = []
                for (var index in arr) {
                  returnArr.push({
                    ...arr[index],
                    label: arr[index].realname,
                    value: arr[index].id,
                  })
                }
                return returnArr
              }
            "
            url="/user"
          />
          {{ dataSelectUserArr }}
        </div>
        <div style="margin-top: 10px;">
          分类查询：
          <app-data-select
            v-model="dataSelectClassArr"
            url="/systemAreaType"
            :init="
              (arr) => {
                var returnArr = []
                for (var index in arr) {
                  returnArr.push({
                    ...arr[index],
                    label: arr[index].type_name,
                    value: arr[index].id,
                  })
                }
                return returnArr
              }
            "
          />
          {{ dataSelectClassArr }}
        </div>
      </div>
      <a-divider />
      <div>
        分类选择及分类的使用
      </div>

      <a-divider />
      <div>
        <a-button @click="CreateAdminShow">
          显示修改
        </a-button>
      </div>
      <a-divider />
      <div style="line-height: 40px;">
        选择一个分类进行测试：
        <app-data-select
          v-model="code"
          url="/systemAreaType"
          radio
          :init="
            (arr) => {
              var returnArr = []
              for (var index in arr) {
                returnArr.push({
                  ...arr[index],
                  label: arr[index].type_name,
                  value: arr[index].id,
                })
              }
              return returnArr
            }
          "
        />
        <br />
        分类显示<br />
        <a-space>
          显示
          <app-show :code="code" :value="codeShow['0001']" />
          - 值
          <a-input v-model="codeShow['0001']" style="width: 200px;" />
        </a-space>
        <br />
        <a-space>
          显示
          <app-show :code="code" :value="codeShow['0002']" />
          - 值
          <a-input v-model="codeShow['0002']" style="width: 200px;" />
        </a-space>

        <br />
        <a-space>
          显示
          <app-show :code="code" :value="codeShow['1']" />
          - 值
          <a-input v-model="codeShow['1']" style="width: 200px;" />
        </a-space>
        <br />
        <a-space>
          显示
          <app-show :code="code" :value="codeShow['2']" />
          - 值
          <a-input v-model="codeShow['2']" style="width: 200px;" />
        </a-space>
        <br />
      </div>
      <a-divider />
      <div>
        分类选择及分类的使用
        <div style="margin-top: 10px;">
          树形： <app-tree-select v-model="treeSelectPF" :code="code" />
          {{ treeSelectPF }}
        </div>
        <div style="margin-top: 10px;">
          树形单选：
          <app-tree-select v-model="treeSelectPFRadio" radio :code="code" />
          {{ treeSelectPFRadio }}
        </div>
        <a-divider />
        <div style="margin-top: 10px;">
          下拉： <app-select v-model="selectPF" :code="code" />
          {{ selectPF }}
        </div>
        <div style="margin-top: 10px;">
          单选单选：
          <app-select v-model="selectPFRadio" radio :code="code" />
          {{ selectPFRadio }}
        </div>
        <a-divider />

        <div style="margin-top: 10px;">
          <app-dropdown
            :code="code"
            @change="
              (key) => {
                selectSexRadio = key
              }
            "
          >
            下拉：{{ selectSexRadio }}
          </app-dropdown>
        </div>
        <div style="margin-top: 10px;">
          单选：
          <app-radio v-model="selectSexRadio" :code="code" />
          {{ selectSexRadio }}
        </div>
        <div style="margin-top: 10px;">
          多选：
          <app-checkbox v-model="selectSex" :code="code" />
          {{ selectSex }}
        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
export default {
  data() {
    return {
      code: undefined,
      codeShow: {
        "0001": "0001",
        "0002": "0002",
        "1": "1",
        "2": "2",
      },
      treeSelectPF: ["0001"],
      treeSelectPFRadio: "0002",
      selectPF: ["0001"],
      selectPFRadio: "0002",
      selectSex: undefined,
      selectSexRadio: undefined,

      dataSelectUser: undefined,
      dataSelectClass: undefined,
      dataSelectUserArr: undefined,
      dataSelectClassArr: undefined,

      edit: {
        visible: false,
        after: (self, formInline) => {
          console.log("加载完执行", self, formInline)
        },
        func: {
          aa: (data) => {
            console.log("回调", data)
          },
          bb: (data) => {
            console.log("回调", data)
          },
        },
        all: true,
        item: {
          realname: {
            key: "realname",
            label: "姓名",
            required: true,
            maxlength: "64",
            rules: [
              {
                min: 3,
                max: 5,
                message: "Length should be 3 to 5",
                trigger: "blur",
              },
              {
                trigger: "blur",
                validator: (rule, value, callback) => {
                  if (!value) {
                    callback(new Error("请输入员工姓名"))
                    return
                  }
                  if (value == "aaa") {
                    callback(new Error("您输入的是aaa"))
                    return
                  }
                  console.log(value)
                  callback()
                },
              },
              {
                trigger: "change",
                validator: (rule, value, callback) => {
                  console.log("change", value)
                  if (value == "aaa") {
                    callback(new Error("您输入的是aaa"))
                    return
                  }
                  callback()
                },
              },
            ],
          },
        },
        itemHide: {
          realhide: "hide_0001",
        },
        width: 600,
        update: (updateMap, callback) => {
          console.log(updateMap)
          callback(true)
        },
      },

      longitude: 116.39745,
      latitude: 39.909174,
      visibleMap: false,

      imageList: [
        "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=1956604245,3662848045&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=2529476510,3041785782&fm=193&f=GIF",
      ],
      imageVisible: false,
      appIconType: "step-backward",
      sortVisible: false,
      iconVisible: false,
      sortArr: [
        {
          label: "a001",
        },
        {
          label: "b002",
        },
        {
          label: "c003",
        },
        {
          label: "d004",
        },
        {
          label: "e005",
        },
      ],
    }
  },
  methods: {
    async CreateAdminShow() {
      this.edit.item = {
        show2Space: {
          type: "space",
          wrapper: true,
          space: [
            {
              key: "show3",
              type: "show",
              wrapper: true,
              value: "show3",
            },
            {
              key: "show2",
              type: "show",
              wrapper: true,
              value: "show3",
            },
            {
              type: "show",
              wrapper: true,
              value: "no key",
            },
          ],
        },
        show3: {
          key: "show3",
          type: "show",
          wrapper: true,
          value: "show3",
        },
        numberShow: {
          label: "数字",
          type: "space",
          space: [
            {
              key: "show3",
              label: "标题",
              type: "number",
            },
          ],
        },

        show1: {
          label: "标题",
          type: "show",
          value: "内容显示",
        },

        select: {
          key: "select",
          label: "流程",
          type: "select",
          value: 1,
          ext: "select",
          radio: true,
          selectArray: [
            {
              label: "未设置",
              value: 0,
              data: {
                key: 0,
                other: "aa",
              },
            },
            {
              label: "正常1",
              value: 1,
              data: {
                key: 1,
                other: "bb",
              },
            },
            {
              label: "停止2",
              value: 2,
            },
          ],
          change: (formInline, val, ext) => {
            console.log(formInline, "select", val, ext)
          },
        },
        radio: {
          key: "radio",
          label: "单选",
          type: "radio",
          ext: "radio",
          radioArray: [
            {
              label: "Hangzhou",
              value: "a",
              data: {
                name: "杭州",
              },
            },
            { label: "Shanghai", value: "b" },
            { label: "Beijing", value: "c" },
            { label: "Chengdu", value: "d" },
          ],
          change: this.testChange,
        },
        radioGroup: {
          key: "radioGroup",
          type: "radioGroup",
          ext: "radioGroup",
          buttonStyle: "solid",
          wrapper: true,
          radioArray: [
            { value: "值", label: "标题" },
            { value: "a", label: "b" },
          ],
          change: this.testChange,
        },
        radioGroup2: {
          key: "radioGroup2",
          type: "radioGroup",
          ext: "radioGroup2",
          wrapper: true,
          value: "b",
          radioArray: [
            {
              label: "Hangzhou",
              value: "a",
              data: {
                name: "杭州",
              },
            },
            { label: "Shanghai", value: "b" },
            { label: "Beijing", value: "c" },
            { label: "Chengdu", value: "d" },
          ],
          change: this.testChange,
        },
        checkbox: {
          key: "checkbox",
          wrapper: true,
          type: "checkbox",
          ext: "checkbox",
          checkboxArray: [
            {
              label: "Hangzhou",
              value: "a",
              data: {
                name: "杭州",
              },
            },
            { label: "Shanghai", value: "b" },
            { label: "Beijing", value: "c" },
            { label: "Chengdu", value: "d" },
          ],
          change: this.testChange,
        },
        switch: {
          key: "switch",
          wrapper: true,
          type: "switch",
          ext: "switch",
          change: this.testChange,
        },
        inputList: {
          key: "inputList",
          label: "输入组合",
          type: "space",
          space: [
            {
              key: "A",
              label: "A",
              ext: "A",
              width: "100px",
              change: this.testChange,
            },
            {
              type: "show",
              value: "nihaoya",
            },
            {
              key: "ABB",
              label: "ABB",
              ext: "ABB",
              type: "tooltip",
              width: "100px",
              // showIf: {
              //   switch2: true,
              // },
              // hideIf: {
              //   switch2: false,
              // },
              change: this.testChange,
            },
            {
              key: "switch2",
              label: "开关",
              type: "switch",
              ext: "switch",
              change: this.testChange,
            },
          ],
        },

        user_base_phone: {
          label: "联系方式",
          type: "space",
          space: [
            {
              key: "mobile",
              label: "手机",
            },
            {
              key: "email",
              label: "邮箱",
            },
            {
              key: "weixin",
              label: "微信号",
            },
          ],
          divider: true,
        },
        items: {
          key: "items",
          type: "array",
          divider: true,
          value: [{}, {}],
          array: [
            {
              key: "range_picker_show",
              label: "出发日期～返程日期",
              type: "range-picker",
              width: "220px",
              change: (formInline, formInlineObj, tmpMomentArr) => {
                formInlineObj["travel_date"] = tmpMomentArr[0]
                  ? this.$day.moment2Timestamp(tmpMomentArr[0].startOf("day"))
                  : undefined
                formInlineObj["return_date"] = tmpMomentArr[1]
                  ? this.$day.moment2Timestamp(tmpMomentArr[1].endOf("day"))
                  : undefined
                formInlineObj["travel_day_num"] =
                  tmpMomentArr && tmpMomentArr[0] && tmpMomentArr[1]
                    ? this.$day.dayDiff(tmpMomentArr[0], tmpMomentArr[1])
                    : undefined
              },
            },
            {
              key: "travel_date",
              type: "hidden",
            },
            {
              key: "return_date",
              type: "hidden",
            },
            {
              key: "travel_day_num",
              type: "hidden",
            },

            {
              key: "departure_city_code",
              label: "出发地",
              type: "systemArea",
              radio: true,
              width: "100px",
              systemArea: {
                table: "order",
                field: "departure_city",
              },
              change: (formInline, formInlineObj, item) => {
                formInlineObj["departure_city"] = item
                  ? item.area_name_all
                  : undefined
              },
            },
            {
              key: "departure_city",
              type: "hidden",
            },
            {
              key: "arrival_city_code",
              label: "目的地",
              type: "systemArea",
              radio: true,
              width: "100px",
              systemArea: {
                table: "order",
                field: "arrival_city",
              },
              change: (formInline, formInlineObj, item) => {
                formInlineObj["arrival_city"] = item
                  ? item.area_name_all
                  : undefined
              },
            },
            {
              key: "arrival_city",
              type: "hidden",
            },
            {
              key: "product_type_code",
              label: "产品类型",
              type: "systemArea",
              radio: true,
              width: "110px",
              systemArea: {
                table: "product",
                field: "product_type",
              },
              change: (formInline, formInlineObj, item) => {
                formInlineObj["product_type"] = undefined
                formInlineObj["product_type_abbreviation"] = undefined
                if (!item) return
                formInlineObj["product_type"] = item.area_name_all
                formInlineObj["product_type_abbreviation"] =
                  item.area_abbreviation
              },
            },
            {
              key: "product_type",
              type: "hidden",
            },
            {
              key: "product_type_abbreviation",
              type: "hidden",
            },
          ],
          change: (formInline, key) => {
            console.log(formInline, key)
          },
        },
        textarea: {
          key: "textarea",
          label: "多行",
          type: "textarea",
          ext: "textarea",
          change: this.testChange,
        },

        date_picker_show: {
          key: "date_picker_show",
          label: "日期选择",
          type: "date-picker",
          change: (formInline, tmpMoment) => {
            formInline["date_picker"] = tmpMoment
              ? this.$day.moment2Timestamp(tmpMoment)
              : undefined
          },
        },
        date_picker: {
          key: "date_picker",
          type: "hidden",
        },
        range_picker_show: {
          key: "range_picker_show",
          label: "时间周期选择",
          type: "range-picker",
          change: (formInline, tmpMomentArr) => {
            formInline["range_picker_start"] = tmpMomentArr[0]
            formInline["range_picker_end"] = tmpMomentArr[1]
          },
        },
        range_picker_start: {
          key: "range_picker_start",
          type: "hidden",
        },
        range_picker_end: {
          key: "range_picker_end",
          type: "hidden",
        },
        tooltip: {
          key: "tooltip",
          label: "输入提示",
          type: "tooltip",
          ext: "tooltip",
          change: this.testChange,
        },
        input: {
          key: "input",
          label: "输入",
          divider: true,
          ext: "input",
          change: this.testChange,
          rules: [
            {
              trigger: "blur",
              validator: (rule, value, callback) => {
                if (!value) {
                  callback(new Error("请输入内容"))
                } else {
                  callback()
                }
              },
            },
            {
              trigger: "change",
              validator: (rule, value, callback) => {
                callback()
              },
            },
          ],
        },
        img: {
          key: "img",
          label: "单张图片",
          type: "upload-image",
          change: (formInline, item) => {
            console.log(formInline, item)
          },
        },
        fileList: {
          key: "fileList",
          label: "多个文件",
          type: "upload-list",
          change: (formInline, item, arr) => {
            console.log(formInline)
            console.log(item)
            console.log(arr)
          },
        },
        editor: {
          key: "editor",
          label: "富文本",
          value: "富文本富文本富文本富文本",
          ext: "editor",
          type: "editor",
          change: this.testChange,
        },
      }
      this.edit.width = 800
      this.edit.all = true
      this.edit.title = "表单测试"
      this.edit.update = (updateData, func) => {
        console.log(updateData)
        func(false)
      }
      this.edit.visible = true
    },
  },
}
</script>

<style lang="less" type="text/less" scoped>
.mytest {
  background: #fff;
  margin: 30px;
  padding: 30px;
}
</style>
